<script lang="ts" setup>
const route = useRoute()
</script>

<template>
	<div class="flex mb-5">
		<n-breadcrumb>
			<!-- <transition-group
				leave-to-class="opacity-0 translate-y-full"
				enter-from-class="opacity-0 -translate-y-full"
				leave-active-class="absolute"
			> -->
			<n-breadcrumb-item
				v-for="item in route.matched"
				:key="item.name"
				@click="$router.push(item.path)"
				class="transform-gpu !transition-all !duration-700"
			>
				<n-icon v-if="item.meta.icon" :component="item.meta.icon" />
				{{ item.name }}
			</n-breadcrumb-item>
			<!-- </transition-group> -->
		</n-breadcrumb>
	</div>
</template>
